<template>
    <Modal v-model="showModal"
           :footer-hide="true"
           :closable="true"
           width="400"
           title="登录"
    >
      <Form ref="login" :model="userMode" label-position="left"
            :label-width="80" :rules="rules"
            @keydown.enter.native="formSubmit">
        <FormItem label="用户名" prop="username">
          <Input v-model="userMode.username" type="text"></Input>
        </FormItem>
        <FormItem label="密  码" prop="password">
          <Input v-model="userMode.password" type="password"></Input>
        </FormItem>
        <FormItem class="ww" >
          <Button type="success" class="login" @click="formSubmit">登录</Button>
        </FormItem>
        <FormItem class="ww">
          <span class="reg">还没有账号？<a @click="formReg">注册</a></span>
          <span class="forget"><a @click="forgetPassword">忘记密码？</a></span>
        </FormItem>

      </Form>
    </Modal>
</template>

<script>
import {mapActions} from 'vuex'

export default {
  name: "login",
  data(){
    return {
      userMode: {
        username: '',
        password: ''
      },
      showModal: false,
    }
  },
  props: {
    userNameRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '账号不能为空', trigger: 'blur'}
        ]
      }
    },
    passwordRules: {
      type: Array,
      default: () => {
        return [
          {required: true, message: '密码不能为空', trigger: 'blur'}
        ]
      }
    }
  },
  computed: {
    rules() {
      return {
        username: this.userNameRules,
        password: this.passwordRules
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      'getUserInfo'
    ]),
    showLoginForm(){
      this.showModal = true;
    },
    formReg(){
      this.showModal = false;
      this.$emit("showReg");
    },
    forgetPassword(){
      this.$Message.error("滴啊开发")
    },
    formSubmit() {
      this.$refs.login.validate((valid) => {
        if (valid) {
          let userName=this.userMode.username;
          let passWord =this.userMode.password;
          this.handleLogin({userName,passWord}).then(res => {
            if (res.code === 200) {
              this.getUserInfo().then(res => {
                  this.$emit("refresh",this.$store.state);
                  this.showModal = false;
              })
            } else {
              this.$Message.error(res.message);
            }
          })
        }
      });
    },
  }
}
</script>
<style lang="css">
  .ww>.ivu-form-item-content{
    margin-left: 0!important;
  }
</style>
<style scoped lang="less">
  .ww{
    width: 100%;
    .login{
      height: 35px;
      width: 100%;
    }
    .reg{
      display: inline-block;
      width:50%;
      padding-right:5% ;
      text-align: right;
    }
    .forget{
      display: inline-block;
      width:50%;
      padding-left:5% ;
      text-align: left;
    }
  }

</style>
